<!--
 * @author: sanbao
 * @Date: 2022-07-24 16:23:51
-->
<style lang='scss' scoped>
.add_goodsshop {
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  .el-form-item {
    display: block;
  }
  .example-block {
    margin: 1rem;
  }
  .example-demonstration {
    margin: 1rem;
  }
  .el-tabs__content {
    height: 200px;
  }
}
</style>

<template>
  <div class="add_goodsshop">
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息" />
      <el-step title="商品参数" />
      <el-step title="商品属性" />
      <el-step title="商品照片" />
      <el-step title="商品内容" />
      <el-step title="完成" />
    </el-steps>
    <el-tabs tab-position="left" class="demo-tabs" @tab-click="tabclick">
      <el-tab-pane label="基本信息">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="ruleForm.goods_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="ruleForm.goods_price" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="ruleForm.goods_weight" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="ruleForm.goods_number" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品数量" prop="pass">
            <el-cascader
              v-model="value"
              :options="categorieslist"
              :props="{ value: 'cat_id', label: 'cat_name' }"
              @change="handleChange"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品参数" :disabled="flag">
        <el-form-item v-for="(item, index) in manylist" :label="item.attr_name">
          <el-input v-model="item.attr_vals" autocomplete="off" />
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商品属性" :disabled="flag">
        <el-form-item v-for="(item, index) in manylist" :label="item.attr_name">
          <el-input v-model="item.attr_vals" autocomplete="off" />
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商品照片" :disabled="flag">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="3"
          :on-exceed="handleExceed"
        >
          <el-button type="primary">Click to upload</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500KB.
            </div>
          </template>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" :disabled="flag">
        <my-editor v-model="editorVal"></my-editor>
        <el-button type="success" @click="addshoplist">添加商品</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  watch,
} from "vue";
import type { FormInstance } from "element-plus";
import GoodsModel from "@/api/goods";
import MyEditor from "@/components/child/MyEditor.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { useRouter } from "vue-router";
export default defineComponent({
  components: { MyEditor },
  setup() {
    onMounted(() => {
      getcategorieslist();
    });
    const router = useRouter();
    const ruleFormRef = ref<FormInstance>();
    const data = reactive({
      active: 0,
      ruleForm: {
        goods_name: "",
        goods_price: 10,
        goods_weight: 10,
        goods_number: 10,
      },
      categorieslist: [],
      value: [],
      editorVal: "",
      flag: true,
      manylist: [],
    });
    const getcategorieslist = async () => {
      const response = await GoodsModel.getcategorieslist();
      if (response.data.meta.status == "200") {
        data.categorieslist = response.data.data;
      }
    };
    const rules = reactive({
      goods_name: [
        { required: true, message: "请输入商品名称", trigger: "blur" },
      ],
      goods_price: [
        { required: true, message: "请输入商品价格", trigger: "blur" },
      ],
      goods_weight: [
        { required: true, message: "请输入商品重量", trigger: "blur" },
      ],
      goods_number: [
        { required: true, message: "请输入商品数量", trigger: "blur" },
      ],
    });
    const tabclick = (e: any) => {
      data.active = Number(e.index);
      if (e.index == 1) {
        addattributesmany();
      } else if (e.index == 2) {
        addattributesonly();
      }
    };
    const addattributesmany = async () => {
      let num = data.value[2];

      const response = await GoodsModel.addattributesmany(
        Number(num),
        String("many")
      );
      if (response.data.meta.status == 200) {
        data.manylist = response.data.data;
      }
    };
    const addattributesonly = async () => {
      let num = data.value[2];

      const response = await GoodsModel.addattributesmany(
        Number(num),
        String("only")
      );
      if (response.data.meta.status == 200) {
        data.manylist = response.data.data;
      }
    };
    const handleChange = (value: any) => {
      // console.log(value);
    };

    // ////
    const fileList = ref<UploadUserFile[]>([
      {
        name: "element-plus-logo.svg",
        url: "https://element-plus.org/images/element-plus-logo.svg",
      },
      {
        name: "element-plus-logo2.svg",
        url: "https://element-plus.org/images/element-plus-logo.svg",
      },
    ]);

    const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
      console.log(file, uploadFiles);
    };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      console.log(uploadFile);
    };

    const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
      ElMessage.warning(
        `The limit is 3, you selected ${
          files.length
        } files this time, add up to ${
          files.length + uploadFiles.length
        } totally`
      );
    };

    const beforeRemove: UploadProps["beforeRemove"] = (
      uploadFile,
      uploadFiles
    ) => {
      return ElMessageBox.confirm(
        `Cancel the transfert of ${uploadFile.name} ?`
      ).then(
        () => true,
        () => false
      );
    };

    // 添加按钮
    const addshoplist = async () => {
      let adddata = {
        goods_cat: `${data.value[0]},${data.value[1]},${data.value[2]}`,
        goods_introduce: data.editorVal,
        goods_name: data.ruleForm.goods_name,
        goods_number: data.ruleForm.goods_number,
        goods_price: data.ruleForm.goods_price,
        goods_weight: data.ruleForm.goods_weight,
        pics: [],
      };
      const response = await GoodsModel.addshoplist(adddata);
      console.log(response);
      if (response.data.meta.status == 201) {
        ElMessage.success(response.data.meta.msg);
        router.push("/goods");
      }
    };
    watch(
      () => data.value,
      (NewVal: any) => {
        if (NewVal == "") {
          data.flag = true;
        } else {
          data.flag = false;
        }
      }
    );
    return {
      ...toRefs(data),
      tabclick,
      rules,
      handleChange,
      fileList,
      handlePreview,
      handleRemove,
      beforeRemove,
      handleExceed,
      addshoplist,
    };
  },
});
</script>
